<script setup>
import { getTasks, addTask, deleteTask, getTask } from "@/api/task";
import { showConfirmDialog } from "vant";
import Picker from "@/components/Picker.vue";
import { types, typeFormatter, statusFormatter } from "./task-data";

const route = useRoute();
const { uid, did } = route.query;

const list = ref([]);

const show = ref(false);
const form = reactive({
  type: "",
  status: 1,
});
const formRef = ref();
const showDialog = (el = {}) => {
  Object.assign(form, {
    type: "",
    status: 1,
  });
  show.value = true;
};
const handleSave = (type) => {
  form.userId = uid;
  form.deviceId = did;
  form.type = type;
  // form.params = '{"stage":"1-7","times":1}'
  addTask(form)
    .then(() => {
      fetchData();
      return true;
    })
    .catch((err) => {
      return false;
    });
};

const handleDelete = (el) => {
  showConfirmDialog({
    title: "提示",
    message: "确定删除吗？",
  })
    .then(() => deleteTask(el.id))
    .then(() => fetchData());
};

const loading = ref(false);
const fetchData = () => {
  loading.value = true;
  getTasks(uid, did)
    .then((res) => {
      list.value = res.reverse();
    })
    .finally(() => {
      loading.value = false;
    });
};

const showImg = (el) => {
  if (el.type.startsWith("CaptureImage") && el.status === 3) {
    location.href = import.meta.env.VITE_BASE_URL + `/task/${el.id}/snapshot`;
    // getTask(el.id).then((res) => {
    //   const binaryString = atob(res.payload);
    //   const len = binaryString.length;
    //   const bytes = new Uint8Array(len);
    //   for (let i = 0; i < len; i++) {
    //     bytes[i] = binaryString.charCodeAt(i);
    //   }
    //   const blob = new Blob([bytes], { type: "image/jpeg" });
    //   const file = new File([blob], "preview.png", { type: "image/png" });
    //   // location.href = webkitURL.createObjectURL(blob);

    //   const url = webkitURL.createObjectURL(file);
    //   WeixinJSBridge.invoke("imagePreview", {
    //     current: url,
    //     urls: [url],
    //   });
    // });
  }
};

onMounted(() => {
  fetchData();
});
</script>

<template>
  <div class="stage" style="height: 100vh">
    <van-pull-refresh v-model="loading" @refresh="fetchData" style="flex: 1">
      <van-swipe-cell v-for="el of list" :key="el.id">
        <van-cell
          :title="typeFormatter(el.type)"
          :label="statusFormatter(el.status)"
          :value="el.status > 1 ? el.updateTime.substring(0, 19) : ''"
          center
          @click="showImg(el)"
        />
        <template #right>
          <van-button
            square
            type="danger"
            text="删除"
            @click="handleDelete(el)"
          />
        </template>
      </van-swipe-cell>
    </van-pull-refresh>

    <!-- <van-floating-bubble icon="tv-o" @click="showImg()" /> -->

    <van-grid clickable>
      <van-grid-item
        v-for="el of types"
        :key="el.value"
        :text="el.text"
        @click="handleSave(el.value)"
      >
        <div v-for="(e, i) of el.text.split('-')" :key="i">{{ e }}</div>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<style lang="scss" scoped>
.stage {
  display: flex;
  flex-direction: column;
}

:deep() {
  .van-swipe-cell__right .van-button {
    height: 100%;
  }
}
</style>
